<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">设置禁言成员</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="content">
			<view class="search_box d-flex a-center j-center">
			    <view class="search d-flex a-center">
			        <i class="tmicon tmicon-search" style="color:#ccc;font-size:30rpx;"></i>
			        <input type="text" class="inp" @input="search" v-model="state.searchText" placeholder="请输入成员昵称" placeholder-style="color:#ccc;font-size:25rpx;" >
			    </view>
			</view>
		    <view class="nodata" v-if="state.members==null||state.members.length<1">
				<image class="nodata-img" src="/static/img/nodata.png" alt="" />
				<view class="text">竟然什么都没有~</view>
		    </view>
			<scroll-view v-else scroll-y="true" class="scroll-member" >
				<view v-for="item in state.members" class="member-row d-flex a-center j-between" :style="{ background: '#FFFFFF' }">
					<view class="row-left d-flex">
						<userhead
						    width="100"
						    height="100"
						    :saveKey="item.userID"
						    :isVip="item.isVip"
						    :src="item.avatar"
						/>
						<rich-text class="d-flex a-center" :nodes="item.nodes"></rich-text>
					</view>
					<view class="row-right">
						<tm-button v-if="!item.isBanned" size="small" :shadow="-1"
						    color="#29DBA3" :fontSize="28" fontColor="#ffffff" @tap="onJoinClock(item)"
						    label="禁言"></tm-button>
						<tm-button v-if="item.isBanned" size="small" :outlined="true" :shadow="-1"
							color="#29DBA3" :fontSize="28" @tap="onJoinClock(item)"
							label="取消"></tm-button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="tsx" name="clockinMember">
import { onLoad } from "@dcloudio/uni-app";
import { ref,reactive } from "vue";
import { getGroupMember,sendBannedMessage } from "@/api/api";
import userhead from "@/components/userhead.vue";
import { getGroupMemberList,setGroupMemberMuteTime } from "@/hooks/imHooks";

const goBack = () => {
	uni.navigateBack();
};
const groupId = ref();
const joinClockType = ref();
onLoad((options:any)=>{
	groupId.value = options.groupId; 
	joinClockType.value = options.joinClockType; 
	
	reqGroupMember();
});
const onJoinClock = (item:any) => {
	if(item.role == 'Owner' || item.role == 'Admin'){
		uni.showToast({
			title:'群主和管理员不可禁言',
			icon:'none',
			duration:1500
		})
		return
	}
	setGroupMemberMuteTime(groupId.value,item.userID,!item.isBanned).then((res:any) => {
		if(res.code === 0){
			item.isBanned = isBanned(res.data.member.muteUntil);
			let parm = {
				ids:[item.userID],
				groupId:groupId.value,
				note:{
					type:'banned_member',
					value:item.isBanned
				}
			}
			sendBannedMessage(parm).then((res:any) => {
				console.log(res)
			})
		}
	})
	
	//countSelect();
};
/*
//根据类型返回改用户是否选中
const isSelect = (item:any) =>{
	return item.muteUntil > 0;
}
//计算选中的数量
const selectCount = ref(0);
const countSelect = () => {
	selectCount.value = (state.all_members.filter((item:any) => isSelect(item) == true)).length;
};
*/
const init = ()=>{
    const clone_all_members = JSON.parse(JSON.stringify(state.all_members))

    state.members = clone_all_members.map(((item:any)=>{
		let color = "#333333";
		if(item.isVip===2)color = "#F19945";
        return {
            ...item,
            nodes:`<div style="color: ${color};
					padding-left:10px;
                    font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
                    text-align: center;">${item.nick||item.userID}</div>`
        }
    }))
	
}
const matchTextHighLight = ()=>{
    const reg = new RegExp(state.searchText,'gi');
    state.members = state.members.map((item:any)=>{
		let color = "#333333";
		if(item.isVip===2)color = "#F19945";
        const obj = {
            ...item,
        }
        const str = item.nick||item.userID;

        const nodes = `<div style="color:${color};
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    text-align: center;">${str.replace(reg,(s:any)=>{
            return `<span style="color:#23e2a6">${s}</span>`
        })}</div>`

        obj.nodes = nodes;
        return obj
    })
}
const search = ()=> {
	if(!state.searchText){
	    init();
	    return
	}
	state.members = state.all_members.filter((item:any)=>{
	    const str = item.nick||item.userID
	    if(str.toLowerCase().search(state.searchText.toLowerCase())!==-1){
	        return true;
	    }else{
	        return false;
	    }
	});
	matchTextHighLight();
};
const state:any = reactive({
    searchText:'',
    members:[],
    all_members:[],
})
const reqGroupMember = async()=>{
    const sysRes:any = await getGroupMember({groupId:groupId.value});
    if(sysRes.flag !== 1){
        uni.showToast({
			icon: "none",
			title:'获取系统成员列表失败',
			duration: 1500,
		});
		return
    }
	const res:any = await getGroupMemberList(groupId.value,0);
	const {code,data} = res;
	if(code !== 0){
		uni.showToast({
			icon: "none",
			title:'获取IM成员列表失败',
			duration: 1500,
		});
		return
	}
	const members:any = [];
	console.log(data.memberList)
	data.memberList.forEach((item:any)=>{
		const element = sysRes.data.list.find((items:any) => item.userID == items.userId); 
		item.isVip = element.isVip
		item.isBanned = isBanned(item.muteUntil)
        members.push(item);
        //if(isSelect(item))oIdSelectUser.push(item.userId);
    })
    state.all_members = members;
	//countSelect();
    init();
}
//const oIdSelectUser:any = [];
/*
const submit = () => {
	
	let newSelectUser:any = [];
	let selectUser = state.all_members.filter((item:any) => isSelect(item) == true);
	
	selectUser.forEach((item:any) => {
		newSelectUser.push(item.userID.toString());
	});
	const deletedValues = oIdSelectUser.filter((value:string) => !newSelectUser.includes(value));  
	const addedValues = newSelectUser.filter((value:string) => !oIdSelectUser.includes(value));
	console.log(deletedValues)
	console.log(addedValues)
	let params = {
		groupId:groupId.value,
		joinClockType:joinClockType.value,
		addClockUsers:addedValues,
		delClockUsers:deletedValues
	}
	setupClockUser(params).then((res:any) => {
		if(res.success){
			uni.showToast({
				icon: "none",
				title:'设置成功',
				duration: 1500,
			});
			goBack();
		}else{
			uni.showToast({
				icon: "none",
				title:res.msg,
				duration: 1500,
			});
		}
	})
};
*/
const isBanned = (timestamp:number) => {
	if(timestamp === 0)return false;
	let currentTime = Math.round(new Date().getTime() / 1000);  // 获取当前时间  
	if (timestamp > currentTime) {  
		return true
	} else {  
		return false;
	}
}
</script>

<style lang="scss" scoped>
.content{
	position:relative;
	height:calc(100vh - 100rpx - var(--status-bar-height));
	.search_box{
	    background:#ffffff;
		padding: 20rpx 30rpx;
	    .search{
	        height:70rpx;
	        border-radius:10rpx;
	        background:#f5f5f5;
	        padding:0 25rpx;
	        .inp{
	            width:570rpx;
	            margin-left:20rpx;
	            font-size:28rpx;
	        }
	    }
	}
	.scroll-member{
		height:calc(100vh - 100rpx - var(--status-bar-height) - 110rpx);
		.member-row{
			height: 120rpx;
			padding-left: 30rpx;
			padding-right: 40rpx;
		}
	}
}
</style>
